<template>
  <div class="phone-modal" v-show="showMask" @touchmove.prevent>
    <div class="phone-box">
      <div class="phone_title1">账号登录</div>
      <div class="phone_con">
        <div class="phone_title2">
          <span class="title1">手机号:</span>
          <div class="content">
            <input type="text" maxlength="11" class="phone" v-model="phone" placeholder="请输入手机号" @blur="inputBlur"/>
          </div>
        </div>
        <div class="phone_title2">
          <span class="title1">密码:</span>
          <div class="content">
            <input type="password" maxlength="16" class="phone" v-model="pwd" placeholder="请输入密码"/>
          </div>
        </div>
      </div>
      <div class="phone_btn" @click="commitInfo">确定</div>

      <div class="tip-box">注册账号、忘记密码及查看报名详情，请<a href="https://url.cn/5AUAFDU" class="down">下载蓝聘APP</a></div>
      <img src="./close.png" class="close-box" onclick="return false" @click="closeModal"/>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../config/env"
  import md5 from 'js-md5'
  import {setSessionStore} from "../config/util";

  export default {
    inject: ['reload'],
    props: {
      value: {},
    },
    data() {
      return {
        phone: "",
        pwd: "",
        showMask: false,
        identity: ""
      }
    },
    mounted() {
      this.showMask = this.value;
    },
    methods: {
      checkPhone() {//校验手机号码
        let phone = this.phone;
        var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (phone == "") {
          this.$vux.toast.text("手机号码不能为空", "middle");
          return;
        }
        if (!reg.test(phone)) {
          this.$vux.toast.text("手机号码格式错误", "middle");
          return;
        }
        return true;
      },
      checkPwd() {//校验密码
        let pwd = this.pwd;
        if (pwd == "") {
          this.$vux.toast.text("密码不能为空", "middle");
          return;
        } else if (pwd.indexOf(" ") >= 0) {
          this.$vux.toast.text("密码中不能有空格字符", "middle");
          return;
        } else if (pwd.length < 6) {
          this.$vux.toast.text("请输入正确密码", "middle");
          return;
        }
        else if ((/[\u4e00-\u9fa5]+/).test(pwd)) {
          this.$vux.toast.text("密码不能包含中文", "middle");
          return;
        }
        return true;
      },
      commitInfo() {//确定
        if (this.checkPhone() && this.checkPwd()) {

          this.$vux.loading.show({
            text: '加载中',
          });

          let data = {"phone": this.phone, "password": md5(this.pwd), "type": 0, "upIdentity": this.identity};
          this.axios.post(baseUrl + "/login/login", data).then((res) => {
            let resultObj = res.data;
            this.showMask = false;
            this.$vux.loading.hide();
            if (resultObj.data == "null") {
              this.$vux.toast.text("用户名或密码错误", "middle");
              return;
            } else if (resultObj.data == "error") {
              this.$vux.toast.text("用户名或密码错误", "middle");
              return;
            } else {
              // let userCookie = document.cookie;
              let base64 = require('js-base64').Base64;
              let userArray = resultObj.data.split("#");
              setSessionStore("user_sign", base64.encode(userArray[0]));
              setSessionStore("userCookie", userArray[1]);
              this.$emit('showPage');
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      closeModal() {
        this.showMask = false;
      }
    },
    watch: {
      value(newVal, oldVal) {
        this.showMask = newVal;
      },
      showMask(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../assets/stylus/mixin.styl";

  .phone-modal
    modal(fixed, 999, 0.5)
    .phone-box
      position: absolute
      left: 0
      top: 1.34rem
      right: 0
      margin: auto
      wh(8rem, 7.253rem)
      background: rgba(255, 255, 255, 1)
      border-radius(0.16rem)
      box-sizing: border-box
      .phone_title1
        text-align: center
        margin-top: 0.64rem
        margin-bottom: 0.627rem
        size-color(0.48rem, rgba(51, 51, 51, 1))
        font-weight: bold
      .phone_con
        margin: 0 auto;
        wh(7.2rem, 2.133rem)
        margin-bottom: 0.4rem
        .phone_title2
          fj(space-between, center)
          wh(100%, 0.96rem)
          margin-bottom: 0.213rem
          .title1
            padding-right: 0.1rem
            size-color(0.427rem, rgba(51, 51, 51, 1))
            font-weight: 500
          .content
            display: flex
            align-items: center
            wh(5.333rem, 0.96rem)
            border: 0.027rem solid rgba(224, 224, 224, 1)
            border-radius(0.16rem)
            .phone
              wh(80%, 0.6rem)
              padding-left: 0.1rem
              line-height: 0.6rem
              color: #666666
              font-size: 0.44rem
      .phone_btn
        fj(center, center)
        margin: 0 auto
        wh(7.2rem, 1.067rem)
        border-radius: (0.16rem)
        background: rgba(60, 175, 255, 1)
        size-color(0.453rem, rgba(255, 255, 255, 1))
        font-weight: 500
      .tip-box
        margin: 0 auto
        text-align: center
        padding-top: 0.44rem
        wh(6.693rem, auto)
        size-color(0.373rem, rgba(60, 175, 255, 1))
        line-height: 0.56rem
        .down
          color: #3CAFFF
          text-decoration underline
      .close-box
        position: absolute
        bottom: -1.5rem
        left: 0
        right: 0
        margin: auto
        wh(0.8rem, 0.8rem)
</style>
